<template>
  <div id="main4" style="width: 100%;height:100%"></div>
</template>

<script>
export default {
  mounted() {
    this.drawChart3();
  },
  methods: {
    drawChart3() {
      const data = {
        name: "温室气体排放",
        children: [
          {
            name: "发电行业",
            children: [
              {
                name: "燃料燃烧",
                children: [
                  { name: "燃煤", value: 721 },
                  { name: "原油", value: 4294 }
                ]
              },
              {
                name: "脱硫过程",
                value: 3322
              }
            ]
          },

          {
            name: "化工企业",
            children: [
              { name: "燃煤", value: 1616 },
              { name: "燃煤", value: 1027 },
              { name: "燃煤", value: 3891 },
              { name: "燃煤", value: 891 },
              { name: "原油", value: 2893 },
              { name: "原油", value: 5103 },
              { name: "原油", value: 3677 },
              { name: "原油", value: 781 },
              { name: "褐煤", value: 4141 },
              { name: "洗精煤", value: 933 },
              { name: "焦炭", value: 5130 },
              { name: "ExpressionIterator", value: 3617 },
              { name: "原油", value: 3240 },
              { name: "洗精煤", value: 2039 },
              { name: "焦炭", value: 1214 },
              { name: "焦炭", value: 3748 },
              { name: "褐煤", value: 843 },
              {
                name: "燃料燃烧",
                children: [
                  { name: "原油", value: 2893 },
                  { name: "原油", value: 5103 },
                  { name: "原油", value: 3677 },
                  { name: "原油", value: 781 },
                  { name: "褐煤", value: 4141 },
                  { name: "洗精煤", value: 933 },
                  { name: "焦炭", value: 5130 },
                  { name: "ExpressionIterator", value: 3617 },
                  { name: "原油", value: 3240 },
                  { name: "洗精煤", value: 2039 },
                  { name: "焦炭", value: 1214 },
                  { name: "焦炭", value: 3748 },
                  { name: "褐煤", value: 843 }
                ]
              },
              { name: "洗精煤", value: 933 },
              { name: "焦炭", value: 5130 },
              { name: "ExpressionIterator", value: 3617 },
              { name: "原油", value: 3240 },
              { name: "洗精煤", value: 2039 },
              { name: "焦炭", value: 1214 },
              { name: "焦炭", value: 3748 },
              { name: "褐煤", value: 843 }
            ]
          }
        ]
      };
      let myChart1 = this.$echarts.init(document.getElementById("main4"));
      var option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove"
        },
        series: [
          {
            type: "tree",
            id: 0,
            name: "tree1",
            data: [data],
            top: "5%",
            left: "15%",
            bottom: "5%",
            right: "30%",
            symbolSize: 7,
            edgeShape: "polyline",
            edgeForkPosition: "63%",
            initialTreeDepth: 3,
            lineStyle: {
              width: 2
            },
            label: {
              backgroundColor: "#fff",
              position: "left",
              verticalAlign: "middle",
              align: "right"
            },
            leaves: {
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left"
              }
            },
            emphasis: {
              focus: "descendant"
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      };
      myChart1.setOption(option);
    }
  }
};
</script>

<style>
</style>